<template>
    <div class="main">
        <lunbo></lunbo>
        <!-- 猜你喜欢    -->
        <div class="like">
            <div class="like-img">
                <span>猜你喜欢</span>
                <img src="../../../public/images/ribbon-totem.png" alt="">
            </div>
            <div class="like-content">
                <ul>
                    <li v-for="(item,index) in lists" :key="index">
                        <div class="imgs">
                            <a href=""><img :src="item.imgSrc" alt=""></a>
                        </div>
                        <span style="font-size:16px">{{ item.name }}</span><br>
                        <span style="font-size:14px">票价：<strong>￥{{ item.price }}</strong>起</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 精彩聚集 -->
        <div class="wonderful">
            <div class="w-img">
                <span>精彩聚集</span>
                <img src="../../../public/images/ribbon-totem.png" alt="">
            </div>
            <div class="w-wx"></div>
            <div class="w-content">
                <div class="img-left">
                    <a href=""><img src="../../../public/images/big2.jpg" alt=""></a>
                </div>
                <div class="img-center">
                    <ul>
                        <li v-for="(item, index) in imgsIndex" :key="index">
                            <a href=""><img :src="item"/></a>
                        </li>
                    </ul>
                </div>
                <div class="img-right">
                    <a href=""><img src="../../../public/images/big5.jpg" alt=""></a>
                </div>
            </div>
        </div>
        <!-- 图片分割线 -->
        <div class="t-img">
            <div class="item1">
                <a href=""><img src="../../../public/images/列表/img_16.png" alt=""></a>
            </div>
            <div class="item2">
                <a href=""><img src="../../../public/images/列表/img_17.png" alt=""></a>
            </div>
            <div class="item3">
                <a href=""> <img src="../../../public/images/列表/img_18.png" alt=""></a>
            </div>
        </div>
        <!-- 年龄选择项 -->
        <div class="change">
            <change></change>
        </div>
        <!-- 热门排行 -->
        <div class="hot">
            <div class="h-img">
                <span>热门排行</span>
                <img src="../../../public/images/ribbon-totem.png" alt="">
            </div>
            <div class="h-btn">
                <button>北京</button>
                <button>南京</button>
                <button>河南</button>
                <button>河北</button>
            </div>
            <div class="h-content">
                <div class="h-c-left">
                    <a href=""><img src="../../../public/images/recomm98132.jpg" alt=""></a>
                </div>
                <div class="h-c-right">
                    <ul>
                        <li v-for="(item,index) in hotLists" :key="index">
                            <div class="r-img">
                                <a href=""><img :src="item.imgSrc" alt=""></a>
                            </div>
                            <div class="r-content">
                                <span style="font-size:24px;color:red;">{{ item.num }}.</span>
                                <span style="height:47px;font-weight: bold;margin-top:10px">{{ item.name }}</span>
                                <span style="height:20px;margin-top:10px">{{ item.date }}</span>
                                <span style="height:20px;margin-top:10px">{{ item.adress }}</span>
                                <span style="height:20px;margin-top:10px"><strong>￥{{ item.price }}起</strong></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 日历 -->
        <div class="calendar">
            
        </div>
        <!-- 合作方 -->
        <div class="partner">
            <div class="p-img">
                <span>合作方</span>
                <img src="../../../public/images/ribbon-totem.png" alt="">
            </div>
            <div class="p-content">
                <div class="p-c-item">
                    <div class="left">
                        <a href=""><img src="../../../public/images/hz3.png" alt=""></a>
                    </div>
                    <div class="center">
                        <ul>
                            <li v-for="(item,index) in pImgsIndex" :key="index">
                                <a href=""><img :src="item" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <a href=""><img src="../../../public/images/hz3.png" alt=""></a>
                    </div>
                </div>
                <div class="p-c-item">
                    <div class="left">
                        <a href=""><img src="../../../public/images/hz1.png" alt=""></a>
                    </div>
                    <div class="center">
                        <ul>
                            <li v-for="(item,index) in pImgsIndex" :key="index">
                                <a href=""><img :src="item" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <a href=""><img src="../../../public/images/hz1.png" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</template>
<script>
import lunbo from '../lanmu/lunbo.vue'
import "@/Mock/api_parenting_list"
import "@/mock/api_parenting_imgs"
import "@/mock/api_parenting_hot"
import change from './change.vue'

export default {
    name: "Parenting",
    data() {
        return{
            lists:[],
            imgs:[
                "/images/cardimg1.jpg",
                "/images/cardimg2.jpg",
                "/images/cardimg3.jpg",
                "/images/cardimg4.jpg",
                "/images/cardimg5.jpg",
                "/images/cardimg6.jpg"
            ],
            imgsIndex:[],
            hotLists:[],
            pImgsIndex:[],
            pImgs:[
                "/images/hz2.png",
                "/images/hz4.png",
                "/images/hz5.png",
                "/images/hz6.png",
                "/images/hz7.png",
                "/images/hz8.png",
                "/images/hz9.png",
                "/images/hz10.png",
                "/images/hz11.png",
                "/images/hz12.png"
            ]
        }
    },
    components: {
        lunbo,
        change
    },
    created(){
        this.$http.get("/api/parenting/imgs").then(res=>{
            for (let i = 0; i < res.data.imgs.length; i++) {
                this.imgsIndex[i] = this.imgs[res.data.imgs[i].count];
            }
            for (let k = 0 ;k < res.data.pImgs.length; k++){
                this.pImgsIndex[k] = this.pImgs[res.data.pImgs[k].number]
            }
            // console.log(this.imgsIndex);
        })
    },
    mounted() {
        this.$http.get("/api/parenting/list").then(res=>{
            this.lists = res.data.lists;
            // console.log(this.lists);
            for(let i=this.lists.length;i>0;i--){
                this.lists[i-1].imgSrc = "../images/calendar0"+(i)+".png";
            }
        })
        this.$http.get("/api/parenting/hot").then(res=>{
            this.hotLists = res.data.lists;
            console.log(this.hotLists);
            for(let i=this.hotLists.length;i>0;i--){
                this.hotLists[i-1].imgSrc = "../images/cardimg"+(i)+".jpg";
            }
        })
    },
}
</script>
<style scoped>
    /* 主题样式 */
    .main{
        width: 100%;
        height: 6000px;
        border: 1px solid red;
    }
    /* 猜你喜欢样式 */
    .like{
        width: 100%;
        height: 400px;
        /* border: 3px dashed gainsboro; */
        margin-top: 80px;
        position: relative;
    }
    .like-img{
        background: rgb(153, 0, 255);
    }
    .like-img,.w-img,.h-img,.p-img{
        width: 50%;
        height: 100px;
        position: absolute;
        left: 25%;
        top: -50px;
        border-radius: 10px;
    }
    .like-img>span,.w-img>span,.h-img>span,.p-img>span{
        font-size: 20px;
        font-weight: bold;
        color: white;
    }
    .like-img>img,.w-img>img,.h-img>img,.p-img>img{
        width: 100%;
        margin-left: 18px;
    }
    .like-content{
        width: 100%;
        height: 300px;
        position: absolute;
        bottom: 10px;
        text-align: left;
        color: gray;
    }
    ul{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    ul li{
        list-style: none;
    }
    .like-content ul li{
        width: 15%;
        height: 300px;
    }
    .like-content .imgs{
        width: 100%;
        height: 250px;
    }
    .like-content .imgs img{
        height: 100%;
        width: 100%;
    }
    /* 精彩集合样式 */
    .wonderful{
        width: 100%;
        height: 600px;
        /* border-top: 3px dashed gainsboro; */
        margin-top: 80px;
        position: relative;
        background: url("../../../public/images/cardimg6.jpg") no;
    }
    .w-img{
        background: rgb(255, 0, 221);
    }
    .w-wx{
        position: absolute;
        width: 40px;
        height: 40px;
        border: 2px green solid;
        border-radius: 50%;
        right: 10px;
        top: -45px;
        background: url("../../../public/images/登录/weixin.png") no-repeat center center;
    }
    .w-content{
        width: 100%;
        height: 500px;
        position: absolute;
        bottom: 10px;
        display: flex;
        justify-content: space-around;
    }
    .img-left{
        width: 20%;
        height: 100%;
        float: left;
    }
    .img-center{
        width: 55%;
        height: 100%;
    }
    .img-center ul{
        display: flex;
        justify-content: space-around;
        flex-flow: wrap;
    }
    .img-center ul li{
        width: 30%;
        height: 240px;
    }
    .img-center ul li:nth-child(1),.img-center ul li:nth-child(2),.img-center ul li:nth-child(3){
        margin-bottom: 20px;
    }
    .img-right{
        width: 20%;
        height: 100%;
        float: right;
    }
    .w-content img{
        width: 100%;
        height: 100%;
    }
    /* 图片分割线样式 */
    .t-img{
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: space-around;
        margin: 50px 0px;
    }
    .item1,.item2,.item3{
        width: 31%;
        height: 100%;
    }
    .t-img img{
        width: 100%;
        height: 100%;
    }
    .change{
        width: 70%;
        height: 500px;
        border: 1px solid red;
        /* float: left; */
    }
    /* 热门排行样式 */
    .hot{
        /* border: 1px solid green; */
        width: 100%;
        height: 500px;
        margin-top: 150px;
        position: relative;
    }
    .h-img{
        background-color: rgb(0, 183, 255);
    }
    .h-btn{
        width: 250px;
        height: 30px;
        font-size: 14px;
        position: absolute;
        right: 10px;
        top: -30px;
        /* border: 1px sienna solid; */
        display: flex;
        justify-content: space-between;
    }
    .h-btn button:nth-child(1){
        border: 1px solid red;
        color: red;
    }
    .h-btn button{
        background-color: white;
        border-radius: 10px;
        width: 50px;
    }
    .h-content{
        width: 100%;
        height: 400px;
        /* border: 1px sienna solid; */
        position: absolute;
        bottom: 0px;
    }
    .h-content img{
        width: 100%;
        height: 100%;
    }
    .h-c-left{
        width: 20%;
        height: 100%;
        /* border: 1px springgreen solid; */
        float: left;
    }
    .h-c-right{
        width: 77%;
        height: 100%;
        /* border: 1px sienna solid; */
        float: right;
    }
    .h-c-right ul{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        flex-flow: wrap;
    }
    .h-c-right ul li{
        /* border: 1px sienna solid; */
        height: 45%;
        width: 32%;
        margin-top: 8px;
    }
    .h-c-right .r-img{
        width: 43%;
        height: 100%;
        /* border: 1px solid red; */
        float: left;
    }
    .h-c-right .r-content{
        float: right;
        width: 51%;
        height: 100%;
        /* border: 1px solid goldenrod; */
    }
    .h-c-right .r-content span{
        display: block;
        width: 100%;
        height: 30px;
        /* border: 1px solid red; */
        text-align: left;
        font-size:14px;
    }
    /* 日历样式 */
    .calendar{
        width: 70%;
        height: 600px;
        border: 1px sienna solid;
        margin: 80px 0px 80px 100px;
    }
    .partner{
        width: 80%;
        height: 400px;
        /* border: 1px sienna solid; */
        position: relative;
    }
    .p-img{
        background-color: rgb(205, 90, 115);
    }
    .p-content{
        width: 100%;
        height: 300px;
        position: absolute;
        bottom: 0px;
        /* border: 1px sienna solid; */
    }
    .p-c-item{
        /* border: 1px solid green; */
        width: 100%;
        height: 41%;
    }
    .p-c-item img{
        height: 100%;
        width: 100%;
    }
    .p-c-item:nth-child(2){
        margin-top: 50px;
    }
    .p-c-item>.left,.p-c-item>.right{
        width: 15%;
        height: 100%;
        /* border: 1px sienna solid; */
        display: inline-block;
    }
    .p-c-item>.left{
        float: left;
    }
    .p-c-item>.right{
        float: right;
    }
    .p-c-item .center{
        width: 68%;
        height: 100%;
        /* border: 1px solid red; */
        display: inline-block;
    }
    .p-c-item .center ul{
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 100%;
    }
    .p-c-item .center ul li{
        width: 18%;
        height: 60%;
        /* border: 1px solid red; */
        margin-top: 25px;
    }
</style>